<template>
  <TabGrayEasyCard :title="'客源情况'" :isMore="false" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
    :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''"
    :unitText="`单位：${card.unitText}`" :updateText="card.updateText"
    v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">

    <slot>
      <el-table :data="card.tableData" height="100%">
        <el-table-column label="客源类型" :align="'right'">
          <template #default="scope">
            {{ scope.row.customerSourceType }}
          </template>
        </el-table-column>
        <el-table-column label="开房数" :align="'right'">
          <template #default="scope">
            {{ toThousands(scope.row.openroomAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="平均房价" :align="'right'">
          <template #default="scope">
            {{ toThousands(scope.row.housePrice) }}
          </template>
        </el-table-column>
        <el-table-column label="客房收入" :align="'right'">
          <template #default="scope">
            {{ toThousands(scope.row.roomRevenue) }}
          </template>
        </el-table-column>
        <el-table-column label="收入占比" :align="'right'">
          <template #default="scope">
            {{ toThousands(scope.row.accountForRevenue) }}%
          </template>
        </el-table-column>
      </el-table>
    </slot>
  </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import { toThousands } from '@/utils/number-util'
import dashBoardApi from '@/api/Manage/Flats/dashBoard'
import { reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'

const props = defineProps({
  permi: {
    type: String,
    required: false,
    default: ''
  },
  hideList: {
    type: Array,
    required: false,
  },
  biProjectCode: {
    type: String,
    required: false,
    default: ''
  },
  updateDate: {
    type: String,
    required: false,
    default: ''
  }
})
const card = reactive(
  {
    tabs: [{ label: '月度', value: '月度' }, { label: '累计', value: '累计' }],
    curTab: '累计',
    tabRight: '',
    grayCardList: [{ label: '客房收入', value: '', unit: '', color: '' }, { label: '其中:散客', value: '', unit: '', color: '' }, { label: '其中:团体', value: '', unit: '', color: '' }],
    unitText: '',
    updateText: '',
    tableData: [],
    startDate: '',
    endDate: '',
  }
)
const getCardData = () => {
  dashBoardApi.queryHotelPassengerRateCardApi({ biProjectCode: props.biProjectCode, timeType: card.curTab, dataTime: props.updateDate }).then((res) => {
    if (res.data.code == 200) {
      card.tabRight = res.data.data.timeLab
      card.grayCardList[0].value = toThousands(res.data.data.roomRevenue)
      card.grayCardList[1].value = toThousands(res.data.data.fit)
      card.grayCardList[2].value = toThousands(res.data.data.organization)
      card.unitText = res.data.data.valueUnit
      card.updateText = res.data.data.dateUpdated
    }
  }).catch(err => {
    console.log(err)
  });
}
const getChartData = () => {
  dashBoardApi.queryHotelPassengerRateCardListApi({ biProjectCode: props.biProjectCode, timeType: card.curTab, dataTime: props.updateDate }).then((res) => {
    if (res.data.code == 200) {
      card.tableData = res.data.data
    }
  }).catch(err => {
    console.log(err)
  });
}

const goDetail = (permi) => {
  reportLog({
    type: 4,
    resourceKey: permi,
  })
}
const changeTab = (value) => {
  card.curTab = value

  getCardData()
  getChartData()
}

getCardData()
getChartData()

const biProjectCode = computed(() => {
  return props.biProjectCode
});
watch(biProjectCode, () => {
  getCardData()
  getChartData()
}, { deep: true });
</script>

<style scoped lang="scss"></style>
